<template>
    <div class="sms_box">
        <h2 class="heading-2">验证码:</h2>
        <div class="v-code">
            <input
                ref="vcode"
                id="vcode"
                type="tel"
                maxlength="6"
                v-model="code"
                @focus="focused = true"
                @blur="focused = false"
                :disabled="telDisabled">

            <label
                for="vcode"
                class="line"
                v-for="item,index in codeLength"
                :class="{'animated': focused && cursorIndex === index}"
                v-text="codeArr[index]"
            >
            </label>
        </div>
        <div class="error_msg">
            您输入的验证码错误,请重新输入
        </div>
        <div class="help_box">
            <a href="javascript:;">重新发送</a>
            <a href="javascript:;">没收到验证码？</a>
        </div>
    </div>

</template>

<script>
    export default {
        name: "CodeInput",
        data() {
            return {
                code: '',
                codeLength: 6,
                telDisabled: false,
                focused: false
            }
        },
        computed: {
            codeArr() {
                return this.code.split('')
            },
            cursorIndex() {
                return this.code.length
            }
        },
        watch: {
            code(newVal) {
                let mobile = this.$route.query.mobile;
                let user_type = localStorage.getItem("user_type")
                this.code = newVal.replace(/[^\d]/g,'')
                if (newVal.length > 5) {
                    // this.telDisabled = true
                    this.$refs.vcode.blur()
                    setTimeout(() => {
                        if(user_type == 'store'){
                            http.post(this, {
                                url: "store/updatemobile",
                                data: {
                                    token: localStorage.getItem("user_token"),
                                    mobile: mobile,
                                    code: this.code,

                                },
                                dataType: "json",
                                success: function(data) {
                                    console.log("登录:", data);
                                    if (data.status == 1) {
                                        this.$message.success('修改手机号码成功')
                                    } else {
                                        this.$message.error(data.info);
                                    }
                                }
                            });
                        }else{
                            http.post(this, {
                                url: "ucenter/updatemobile",
                                data: {
                                    token: localStorage.getItem("user_token"),
                                    mobile: mobile,
                                    code: this.code,

                                },
                                dataType: "json",
                                success: function(data) {
                                    console.log("登录:", data);
                                    if (data.status == 1) {
                                        this.$message.success('修改手机号码成功')
                                    } else {
                                        this.$message.error(data.info);
                                    }
                                }
                            });
                        }
                    }, 500)
                }
            }
        }
    }
</script>
<style scoped lang="scss">

    .code-input-main {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .code-input-main-item {
        font-family: time-font-myself;
        width: 1.84rem;
        height: .44rem;
        opacity: 0.8;
        border-bottom: solid #666666 1px;
        margin: 0 .05rem;
        text-align: center;
        padding-bottom: 0;
        font-size: 60px;
        color: #666666;
    }
    .code-input-input {
        height: .44rem;
        position: absolute;
        outline: none;
        color: transparent;
        text-shadow: 0 0 0 transparent;
        width: 300%;
        margin-left: -100%;
    }
    .sms_box{
        padding:0.8rem 1rem;
    }
    .sms_top{
        margin-bottom:0.5rem;
        .sms_title{
            font-size: 0.4rem;
            font-weight: 500;
            color:#999999;
            margin-bottom:0.1rem;
        }
    }
    .error_msg{
        color:#ff0000;
        font-size: 0.3rem;
        margin-top:0.2rem;
    }
    .help_box{
        margin-top:0.2rem;
        &>a{
            color:#265cff;
            font-size: 0.3rem;
          }
        &>a:first-child{
            margin-right:0.3rem;
          }
    }

    .heading-2 {
        color: #333333;
    }
    .v-code {
        margin-top: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
    .v-code input {
        position: absolute;
        top: -100%;
        left: -666666px;
        opacity: 0;
    }
    .v-code .line {
        position: relative;
        width: 40px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 28px;
    }
    .v-code .line::after {
        display: block;
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        bottom: 0;
        height: 1px;
        background-color: #aaaaaa;
        transform: scaleY(.5);
        transform-origin: 0 100%;
    }
    .v-code .line.animated::before {
        display: block;
        position: absolute;
        left: 50%;
        top: 20%;
        width: 1px;
        height: 60%;
        content: '';
        background-color: #333333;
        animation-name: coruscate;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
    }
    /*.v-code .line.animated::before {
      display: block;
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 2px;
      background-color: #000000;
    }*/
    @keyframes coruscate {
        0% {
            opacity: 0
        }
        25% {
            opacity: 0
        }
        50% {
            opacity: 1
        }
        75% {
            opacity: 1
        }
        to {
            opacity: 0
        }
    }
</style>
